<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>

		<title>rounded skeleton page | The Dojo Toolkit</title>
			
		<script type="text/javascript" src="../../../dojo/dojo.js"
				data-dojo-config="parseOnLoad:true, isDebug:true"></script>

		<script type="text/javascript">
		
			dojo.require("dijit.layout.ContentPane");
			dojo.require("dijit._Templated");
			dojo.require("dojox.gfx");
			dojo.require("dojo.dnd.TimedMoveable");
			
			dojo.declare("my.RoundedContentPane",[dijit.layout.ContentPane,dijit._Templated],{
				// radius: Integer
				//		radius of the corners
				radius:15,
				// moveable: Boolean
				// 		if true, the node is movable by either the containerNode, or an optional node
				//		found by the handle attribute
				moveable:false,
				// handle: String
				// 		a CSS3 selector query to match the handle for this node, scoped to this.domNode
				handle:".handle",
				
				// template:
				templateString:
					'<div><div style="position:relative;">' +
						'<div dojoAttachPoint="surfaceNode"></div>' +
						'<div dojoAttachPoint="containerNode"></div>' +
					'</div></div>',
				
				startup:function(){
					
					this.inherited(arguments);
					this._initSurface();
					dojo.style(this.surfaceNode,{
						position:"absolute",
						top:0,
						left:0
					});
					
					if(this.moveable){
						this._mover = new dojo.dnd.TimedMoveable(this.domNode,{
							handle: dojo.query(this.handle,this.domNode)[0] ||this.containerNode,
							timeout:69
						});
					}
			
				},
				
				_initSurface: function(){
			
					var s = dojo.marginBox(this.domNode);
					var stroke = 2;
					
					this.surface = dojox.gfx.createSurface(this.surfaceNode, s.w + stroke * 2, s.h + stroke * 2);
					this.roundedShape = this.surface.createRect({
							r: this.radius,
							width: s.w,
							height: s.h
						})
						.setFill([0, 0, 0, 0.5]) // black, 50% transparency
						.setStroke({ color:[255,255,255,1], width:stroke }) // solid white
					;
					this.resize(s);
					
				},
				
				resize:function(size){
					
					if(!this.surface){ this._initSurfce(); }
			
					this.surface.setDimensions(size.w,size.h);
					this.roundedShape.setShape({
						width: size.w,
						height: size.h
					});
			
					var _offset = Math.floor(this.radius / 2);		
					dojo.style(this.containerNode,{
						color: "#fff",
						position: "absolute",
						overflow: "auto",
						top: _offset + "px",
						left: _offset + "px",
						height: (size.h - _offset * 2) + "px",
						width: (size.w - _offset * 2) + "px"
					});
					
				}
				
			});
		</script>
			
		<style type="text/css">
			body { background:#ededed; }
		</style>
	
    </head>
    <body>
		
		<h1>Some gfx + ContentPane's</h1>

		<div dojoType="my.RoundedContentPane" radius="55" title="Pane 2" style="width:200px; height:400px; float:right">
			<h3>YO!</h3>
			<p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p><p>lorem</p>
		</div>

		<div style="width:400px; height:200px;" dojoType="my.RoundedContentPane">
			LOREM, ipsum, dollllllllllor:
			.roundedContent {
				padding: 31px;
				font-family: 'Tahoma';
				font-size: 12px;
				color:#fff; 
			}<p>.roundedContent {
				padding: 31px;
				font-family: 'Tahoma';
				font-size: 12px;
				color:#fff; 
			}</p><p>.roundedContent {
				padding: 31px;
				font-family: 'Tahoma';
				font-size: 12px;
				color:#fff; 
			}</p><p>.roundedContent {
				padding: 31px;
				font-family: 'Tahoma';
				font-size: 12px;
				color:#fff; 
			}</p><p>.roundedContent {
				padding: 31px;
				font-family: 'Tahoma';
				font-size: 12px;
				color:#fff; 
			}</p><p>.roundedContent {
				padding: 31px;
				font-family: 'Tahoma';
				font-size: 12px;
				color:#fff; 
			}</p><p>.roundedContent {
				padding: 31px;
				font-family: 'Tahoma';
				font-size: 12px;
				color:#fff; 
			}</p><p>.roundedContent {
				padding: 31px;
				font-family: 'Tahoma';
				font-size: 12px;
				color:#fff; 
			}</p><p>.roundedContent {
				padding: 31px;
				font-family: 'Tahoma';
				font-size: 12px;
				color:#fff; 
			}</p><p>.roundedContent {
				padding: 31px;
				font-family: 'Tahoma';
				font-size: 12px;
				color:#fff; 
			}</p><p>.roundedContent {
				padding: 31px;
				font-family: 'Tahoma';
				font-size: 12px;
				color:#fff; 
			}</p><p>.roundedContent {
				padding: 31px;
				font-family: 'Tahoma';
				font-size: 12px;
				color:#fff; 
			}</p>
			
		</div>
	
	
		<div radius="45" style="width:400px; height:200px;" moveable="true" dojoType="my.RoundedContentPane" handle=".myHandle">
			<h4 class="myHandle" style="cursor:move; margin-top:0; border:1px solid #666">Moveable Handle</h4>
			LOREM, ipsum, dollllllllllor:			
		</div>
	
	
		<div dojoType="my.RoundedContentPane" title="Pane 1" moveable="true" style="width:100px; height:100px;">
			lorem ipsum (small moveable)
		</div>		
	
    </body>
</html>
